<!DOCTYPE html>
<html>
<head>
    <title>Bar Magnet</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="300"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '24px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Define the vertices of the bar magnet in a 3D perspective
        const w = 280; // width
        const h = 60;  // height
        const d = 30;  // depth (perspective shift)

        const cx = canvas.width / 2;
        const cy = canvas.height / 2 + 30;

        // Front face vertices
        const ftl = { x: cx - w / 2, y: cy - h / 2 }; // front-top-left
        const ftr = { x: cx + w / 2, y: cy - h / 2 }; // front-top-right
        const fbl = { x: cx - w / 2, y: cy + h / 2 }; // front-bottom-left
        const fbr = { x: cx + w / 2, y: cy + h / 2 }; // front-bottom-right

        // Back face vertices
        const btl = { x: ftl.x - d, y: ftl.y - d }; // back-top-left
        const btr = { x: ftr.x - d, y: ftr.y - d }; // back-top-right
        const bbl = { x: fbl.x - d, y: fbl.y - d }; // back-bottom-left
        const bbr = { x: fbr.x - d, y: fbr.y - d }; // back-bottom-right

        // --- Draw the magnet ---

        // Draw solid visible lines
        ctx.beginPath();
        // Top face
        ctx.moveTo(ftl.x, ftl.y);
        ctx.lineTo(btl.x, btl.y);
        ctx.lineTo(btr.x, btr.y);
        ctx.lineTo(ftr.x, ftr.y);
        ctx.closePath();
        // Front face
        ctx.moveTo(ftl.x, ftl.y);
        ctx.lineTo(fbl.x, fbl.y);
        ctx.lineTo(fbr.x, fbr.y);
        ctx.lineTo(ftr.x, ftr.y);
        // Right face
        ctx.moveTo(ftr.x, ftr.y);
        ctx.lineTo(fbr.x, fbr.y);
        ctx.lineTo(bbr.x, bbr.y);
        ctx.lineTo(btr.x, btr.y);
        ctx.stroke();

        // Draw dashed hidden lines (left face and central axis)
        ctx.beginPath();
        ctx.setLineDash([6, 4]);

        // Left face hidden edges
        ctx.moveTo(fbl.x, fbl.y);
        ctx.lineTo(bbl.x, bbl.y);
        ctx.lineTo(btl.x, btl.y);

        // Central axis
        const axisStartY = (ftl.y + fbl.y) / 2;
        const axisEndY = (btl.y + bbl.y) / 2;
        const axisStartX = (fbl.x + bbl.x)/2;
        const axisEndX = (fbr.x + bbr.x)/2;
        const axisCenterY = (axisStartY + axisEndY)/2;
        
        ctx.moveTo(axisStartX, axisCenterY);
        ctx.lineTo(axisEndX, axisCenterY);
        
        ctx.stroke();

        // Reset to solid lines
        ctx.setLineDash([]);

        // --- Draw labels ---

        // 'S' on the left face
        ctx.fillText('S', axisStartX, axisCenterY);

        // 'N' on the right face
        ctx.fillText('N', axisEndX, axisCenterY);

        // --- Draw point P ---
        const p_x = cx - d/2;
        const p_y = cy - h/2 - 60;

        // Draw the point
        ctx.beginPath();
        ctx.arc(p_x, p_y, 4, 0, 2 * Math.PI);
        ctx.fill();

        // Label the point
        ctx.fillText('P', p_x + 20, p_y);

    </script>
</body>
</html>